<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<style type="text/css">
    .collist {
        width: 170px;
        border-top: 1px solid lightgrey;
    }

    .collist .colitem {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid lightgrey;
        border-top: 0px;
        cursor: pointer;
        display: flex;
    }

    .collist .colitem .title {
        width: 120px;
    }

    .collist .colitem .isshow {
        width: 50px;
    }
</style>
<div class="collist">

</div>
<script type="text/javascript">
    var dragId;
    $(function () {
        var count = 0;
        var visibleCol = ${visibleCol};
        for (var i = 0; i < visibleCol.length; i++) {
            count++;
            if (filterCol(visibleCol[i])) continue;
            $(".collist").append(getitem(visibleCol[i], true));
        }
        var hiddenCol = ${hiddenCol};
        for (var i = 0; i < hiddenCol.length; i++) {
            count++;
            if (filterCol(hiddenCol[i])) continue;
            $(".collist").append(getitem(hiddenCol[i], false));
        }

        $(".collist .colitem").attr("draggable", "true").on("dragstart", function (ev) {
            dragId = ev.target.id;
        }).on("drop", function (ev) {
            ev.preventDefault();
            $("#" + dragId).insertBefore($("#" + ev.currentTarget.id));
        }).on("dragover", function (ev) {
            ev.preventDefault();
        })

        function getitem(col, isvisible) {

            var html = "<div id='item" + count + "' field='" + col.field + "' class='colitem'>" +
                "           <div class='title'>" + col.title + "</div>" +
                "           <div class='isshow'><input type='checkbox' " + (isvisible ? "checked='checked'" : "") + "></div>" +
                "       <div>";
            return html;
        }

        //过滤不进行设置的列
        function filterCol(col) {
            var tj = col.field == "id";
            var tj1 = col.title == "操作";
            var tj2 = col.title == "修改";
            var tj3 = col.title == "选择";

            if (tj || tj1 || tj2 || tj3) {
                return true;
            }
        }
    })
</script>

